<template>
    <div>
        <div class="goods">
            <div class="menu-wrapper" ref="menuWrapper">
                <ul ref="menuUl">
                    <li 
                    class="menu-item" 
                    v-for="(goods,index) of goodsList" 
                    :key="index" 
                    :class="{ current:index==currentIndex}"
                    @click="changeMenu(index)"
                    >
                        <span class="text">
                            <img :src="goods.icon" v-if="goods.icon">
                            {{goods.name}}
                        </span>
                    </li>
                </ul>
            </div>

            <div class="foods-wrapper" ref="foodsWrapper">
                <ul ref="foodsUl">
                    <li class="food_list" v-for="(goods,index) of goodsList" :key="index">
                        <h1 class="category">{{goods.name}}</h1>
                        <ul>
                            <li 
                            class="food_item" 
                            v-for="(food,index) of goods.foods" 
                            :key="index" 
                            @click="showFoodDetail(food)"
                            >
                                <div class="icon">
                                    <img :src="food.icon" width="80" height="80" alt="">
                                </div>
                                <div class="content">
                                    <h2 class="name">{{food.name}}</h2>
                                    <h5 class="desc" v-if="food.description!=''">{{food.description}}</h5>
                                    <h5 class="desc" v-if="food.description==''">假装这是一条描述...</h5>
                                    <div class="extra">
                                        <span class="count">月售{{food.sellCount}}份</span>
                                        <span>好评率{{food.rating}}%</span>
                                    </div>
                                    <div class="price">
                                        <span class="now">￥{{food.price}}</span>
                                        <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                                    </div>
                                    <div class="cartcontrol_wrapper">
                                      <CartControl :food="food"/>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <ShopCart/>
        </div>
        <FoodDetail :food="food" ref="foodDetail"/>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import { mapState } from "vuex";

import CartControl from "../CartControl/CartControl.vue";
import FoodDetail from "../FoodDetail/FoodDetail.vue";
import ShopCart from "../ShopCart/ShopCart.vue";

export default {
  name: "GoodsList",
  data() {
    return {
      scrollY: 0,
      tops: [],
      food: {}
    };
  },
  components: { CartControl, FoodDetail, ShopCart },
  computed: {
    ...mapState(["goodsList"]),

    // 计算得到当前分类的下标
    currentIndex() {
      //得到条件数据
      const { scrollY, tops } = this;
      // 根据条件计算产生一个结果
      const index = tops.findIndex((top, index) => {
        return scrollY >= top && scrollY < tops[index + 1];
      });
      // 返回结果
      return index;
    }
  },
  mounted() {
    this.$store.dispatch("getGoodsList", () => {
      this.$nextTick(() => {
        this._initScroll();
        this._initTops();
      });
    });
    this.$store.dispatch("getProductData", {});
  },
  methods: {
    //初始化滚动条
    _initScroll() {
      const menuScroll = new BScroll(".menu-wrapper", {
        click: true
      });
      this.foodsScroll = new BScroll(".foods-wrapper", {
        probeType: 3,
        click: true,
        scrollY: true
      });
      // 给右侧商品列表绑定 scroll 监听
      this.foodsScroll.on("scroll", ({ x, y }) => {
        // console.log(x, y);
        this.scrollY = Math.abs(y);
      });
      // 给右侧商品列表绑定 scrollEnd 监听
      this.foodsScroll.on("scrollEnd", ({ x, y }) => {
        // console.log(x, y);
        this.scrollY = Math.abs(y);
      });
    },

    // 收集每一个类名 li 的 top
    _initTops() {
      // 初始化 tops
      const tops = [];
      // top 值不断在累加，因此定义一个变量用于累加
      let top = 0;
      tops.push(top);
      // 找到每一个类名 li
      // const lis = this.$refs.foodsUl.getElementsByClassName('food_list');
      const lis = this.$refs.foodsUl.children;
      // 得到的是一个伪数组，需要转换为真数组
      Array.prototype.slice.call(lis).forEach(li => {
        top += li.clientHeight;
        tops.push(top);
      });
      // 更新数据
      this.tops = tops;
      // console.log(tops);
    },

    //点击左边分类，切换右边商品
    changeMenu(index) {
      // console.log(index);
      // 得到目标位置的scrollY
      const scrollY = this.tops[index];
      // console.log(scrollY);
      // 立即更新scrollY(让点击的分类项成为当前分类)
      this.scrollY = scrollY;
      // 平滑滑动右侧列表
      this.foodsScroll.scrollTo(0, -scrollY, 300);
    },

    // 显示点击的商品详情
    showFoodDetail(food) {
      this.food = food;
      // 显示 FoodDetail 组件（在父组件中调用子组件对象的方法）
      this.$refs.foodDetail.toggleShow();
    }
  }
};
</script>

<style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
.goods {
  display: flex;
  position: absolute;
  //   background-color: green;
  bottom: 55px;
  top: 80px;
  width: 100%;
  overflow: hidden;
  .menu-wrapper {
    width: 25%;
    background: #f3f5f7;
    // background-color: blue;
    .current {
      color: #40ab55;
      margin-top: -1px;
      background-color: #fff;
      font-weight: 700;
      border-left: 3px solid #ff8c00;
    }
    .menu-item {
      display: table;
      height: 50px;
      width: 100%;
      line-height: 14px;
      .text {
        display: table-cell;
        width: 56px;
        font-size: 14px;
        font-weight: 400;
        vertical-align: middle;
        border-bottom: 1px solid (rgba(7, 17, 27, 0.1));
        text-align: center;
        img {
          width: 14px;
          height: 14px;
          margin-right: 2px;
          vertical-align: center;
        }
      }
    }
  }
}

.foods-wrapper {
  width: 75%;
  margin-top: 2px;
  //  background-color: yellow;
  //  padding: 0 10px;
  .food_list {
    // margin-top: 10px;
    .category {
      height: 20px;
      line-height: 20px;
      border-left: 2px solid #d9dde1;
      font-size: 14px;
      color: rgb(147, 153, 159);
      background: #f3f5f7;
      padding-left: 3px;
    }
    .food_item {
      margin-top: 10px;
      height: 100px;
      width: 100%;
      // background-color: pink;
      display: flex;
      padding: 6px;
      margin-top: 10px;
      border-bottom: 1px solid (rgba(7, 17, 27, 0.1));
      .icon {
        margin-right: 10px;
      }
      .content {
        position: relative;
        width: 100%;
        .name {
          font-size: 16px;
          line-height: 16px;
          font-weight: 700;
          color: rgb(7, 17, 27);
        }
        .desc,
        .extra {
          font-size: 10px;
          line-height: 12px;
          color: rgb(147, 153, 159);
        }
        .desc {
          height: 22px;
        }
        .extra {
          line-height: 12px;
          .count {
            margin-right: 12px;
          }
        }
        .price {
          font-weight: 700;
          line-height: 24px;
          .now {
            color: rgb(240, 20, 20);
            font-size: 14px;
            margin-right: 8px;
          }
          .old {
            text-decoration: line-through;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }
        }
        .cartcontrol_wrapper {
          position: absolute;
          right: 3px;
          bottom: -2px;
        }
      }
    }
  }
}
</style>
